import React, { useEffect, useState } from 'react'
//import React from 'react'
import { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';
import axios from "axios";
import api from '../../server/Api';

export default function chargeRecord() {
  const [dataSource, setDataSource] = useState([]);
  const [loading, setLoading] = useState(true);
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '水表编号',
      dataIndex: 'waterMeterId',
      key: 'waterMeterId',
    },
    {
      title: '账单时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '抄表日期',
      dataIndex: 'readMeterTime',
      key: 'readMeterTime',
    },
    {
      title: '抄表读数',
      dataIndex: 'readMeterDegree',
      key: 'readMeterDegree',
    },
    {
      title: '上月读数',
      dataIndex: 'lastMouthDegree',
      key: 'lastMouthDegree',
    },
    {
      title: '用水量',
      dataIndex: 'readMeterDegree',
      key: 'readMeterDegree',
    },
    {
      title: '抄表状态',
      dataIndex: 'state',
      key: 'state',
    },
    {
      title: '抄表图片',
      dataIndex: 'meterImage',
      key: 'meterImage',
    },
  ];
  // 清除删除修改之后的副作用
  useEffect(() => {
    getUserInfo()
  }, []);
  const getUserInfo = () => {
    setTimeout(() => {
      axios.post(`${api}/getAllRecord`).then(function (response) {
        console.log(response);
        setDataSource(response.data.data);
        setLoading(false);
      }).catch(function (error) {
        console.log(error)
      });
    }, 1000)
  }
  return (
    <div className='table'>
      <Form>
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          loading={loading}
          rowKey={(record) => record.readMeterId}
          pagination={{
            pageSize:5
          }}
        />
      </Form>
    </div>
  )
}
